<template>
	<view class="my-collection">
		<u-navbar :autoBack="true" :title="`${title}`" bgColor="#0e121a" safeAreaInsetTop :placeholder="true" leftIconColor="#FFFFFF"
			titleStyle="{fontSize: 16px;font-weight: bold;color: #FFFFFF;}">
			<view class="u-nav-slot f-base bold flex-no-horizontal" v-if="filterList.length >= 2" @click="onShowType()" slot="right" style="position: relative;">
				<!-- <u-image src="/static/img/device-filter.png" width="16" height="16"
					@click="isShowMenu = !isShowMenu"></u-image> -->
				<text style="color: #FFFFFF; margin-right: 10rpx;">筛选</text>
				<image src="/static/img/device-filters.png" style="width: 16px; height: 16px;" mode=""></image>

			</view>
		</u-navbar>
		<view :class="isShowMenu ? 'open' : 'close'"  :style="showType ? 'display: block;' : 'display:none;'" class="transitions">
			<view class="menu">
				<view class="f-xs menu-item" :class="index !== current ? 'greyIns': 'grey'"
					v-for="(item, index) in filterList" :key="index" @click.stop="onScreen(item, index)">{{item.nft_name}} <text v-if="item.count">({{item.count}})</text>
				</view>
			</view>
		</view>
		<view :class="isShowMenu ? 'screenSuccess' : ''" @tap="onClose()" class="screenBck"></view>
		<view class="storage" v-if="!loading">
			<view class="p-20 full-height">
				<view class="list flex-no-horizontal" v-if="listBrooch.length">
					<view class="list-item" v-for="(item,index) in listBrooch" :key="index">
						<view class="colltion" v-if="item.type" @click="handle(item)">
							<u--image :src="item.nft_img_url" width="315rpx" height="406rpx" :lazy-load="true"></u--image>
							<view class="colltion-title border-box">
								{{item.nft_title || item.nft_name}}#{{item.token_id}}
							</view>
						</view>
						<view class="colltion" v-else-if="!item.status" @click="onOpenBlindBox(item)">
							<u--image :src="item.gif_img" width="315rpx" height="406rpx" :lazy-load="true"></u--image>
							<view class="colltion-title border-box">
								{{item.blind_box_name}}
							</view>
						</view>
					</view>
				</view>
				<view class="empty" v-else>
					<u--image src="../../static/img/empty-my-collection2.png" width="210" height="169"></u--image>
					<text class="f-xs m-t-20">暂无藏品～</text>
				</view>
			</view>
		</view>
		<u-popup :show="blindBoxType" mode="center" round="20" overlayOpacity="0.8">
			<view class="warp">
				<view class="rect" @tap.stop>
					<u--image :src="openData.gif_img" width="502rpx" height="481rpx" class="cover"></u--image>
					<view class="f-xl btn text-center bold openBtnBlindBox" @click="$u.throttle(openBlind, 500)">打开盲盒
					</view>
					<view class="closeBlind">
						<u--image src="/static/img/closeBlind.png" width="52rpx" height="52rpx"
							@tap="blindBoxType = false" class="cover"></u--image>
					</view>
				</view>
			</view>
		</u-popup>
		<open-ben :show="isShowOpen" v-if="isShowOpen" :proData="openData" @onGotoPage="gotoPages" @close="closeBox">
		</open-ben>
	</view>
</template>

<script>
	import {storage_list,broochFilter,getMycollection,openBoxX} from '../../api/collection.js'
	import openBen from './common/openBen.vue'
	export default {
		components: {
			openBen
		},

		data () {
			return {
				loading: true,
				isShowMenu: false,
				current: 0,
				grade_id: '',
				showType: false,
				title: '',
				stateData: {},
				listBrooch: [],
				nft_name: '' ,//筛选名称
				filterList: [{
						count: 0,
						id: '',
						nft_name:'全部',
						state: true
					}],//筛选数组
				counts: 0,//收纳藏品总数量
				typeFilters: 0,//判断右上角筛选是否刷新
				typeNewTitle: 0,//阻止title数量增加
				newTitle: '',//存入一个title
				openData:{},//当前选中的盲盒
				blindBoxType: false, //盲盒展示
				isShowOpen: false//开启盲盒
			}
		},
		onLoad(options){
			this.grade_id = options.id
			this.title = options.title
			this.counts = options.count
			this.onGetList()
		},
		onPullDownRefresh() {
			this.isShowMenu = false
			this.onInitialization();
			this.typeFilters = 0
			this.onGetList();
			this.listBrooch = []
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			}, 1000)
		},
		methods: {
			//盲盒开启成功跳转
			gotoPages() {
				this.closeBox();
				this.blindBoxType = false
				this.isShowOpen = false
				uni.navigateTo({
					url: `/pages/collection/superblockChain?id=${this.openData.id}&apiTypeState=${this.openData.apiTypeState}&collectionType=${this.openData.collectionType}`,
					fail(e) {
						console.log(e)
					}
				})
			},
			//开启盲盒
			async openBlind() {
				try {
					const res = await openBoxX({
						boxId: this.openData.id
					})
					this.openData.name = res.data.nft_title
					this.openData.token_id = res.data.token_id
					this.openData.nft_img_url = res.data.nft_img_url
					this.blindBoxType = false
					this.isShowOpen = true
				} catch (e) {
					uni.showToast({
						title: e.message,
						icon: 'none',
						duration: 2000
					})
				}
			},
			// 获取当前选中的盲盒
			onOpenBlindBox(e){
				this.openData = e
				this.blindBoxType = true;
			},
			onShowType(){
				this.isShowMenu = !this.isShowMenu
				!this.isShowMenu ? this.onClose() : this.showType = true;
			},
			onClose(){
				this.isShowMenu = false
				setTimeout(()=>{
					this.showType = false
				}, 300)
			},
			handle(item){
				if(item.apiTypeState == 1){
					uni.navigateTo({
						url: `/pages/collection/detail?id=${item.id}&apiTypeState=${item.apiTypeState}`,
						fail(e) {
							console.log(e)
						}
					})
				} else {
					uni.navigateTo({
						url: `/pages/collection/superblockChain?id=${item.id}&apiTypeState=${2}&collectionType=${1}`,
						fail(e) {
							console.log(e)
						}
					})
				}

			},
			onScreen(item, index) {
				this.onClose();
				this.current = index
				this.stateData = item
				this.nft_name = this.stateData.nft_name
				this.listBrooch = []
				this.onGetList();
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			async onBroochFilter(){
				try {
					uni.hideLoading()
					this.loading = false
				} catch (e) {
					uni.hideLoading()
					this.loading = false
				}
			},
			//初始化数据
			onInitialization(){
				this.filterList = [
					{
						id: '',
						nft_name: '全部',
						state: true,
						count: 0
					}
				]
			},
			//百度链藏品
			async onGetMycollection() {
				this.onInitialization();
				try {
					const res = await getMycollection() //百度链藏品列表
					let arr = [];
					let resData = res.data.data
					if (resData.length) {
						resData.forEach(item => {
							const type = item.status === 1 && item.type === 0 ? 0 : 1
							arr.push({
								nft_img_url: item.image,
								id: item.id,
								nft_title: type ? item.title : '本草纲目盲盒',
								token_id: item.number,
								boxType: 2, // 1.姜小竹 2.本草纲目
								apiTypeState: 1
							})
						})
					}
					this.title = `${this.newTitle}${this.counts ? `(${this.counts})` : ``}`
					arr.forEach((item, index) =>{
						this.listBrooch.push(item)
					})
					uni.hideLoading()
					this.loading = false
				} catch (e) {
					uni.hideLoading()
					this.loading = false
				}
			},
			//超块链藏品
			async onGetList() {
				uni.showLoading({
					title: '加载中...'
				})
				try {
					const resHasNft = await storage_list({
						storage_id: this.grade_id,
						nft_name: this.nft_name
					})
					let data = resHasNft.data.data,
						datas = data.list,
						counts = 0; //总量
					if(!this.typeFilters && data.filter.length){
						data.filter.forEach((item, index) =>{
							counts += item.count
							this.filterList.push({
								id: '',
								nft_name: item.nft_name,
								state: false,
								count: item.count
							})
						})
						this.filterList[0].count = counts
						this.typeFilters++
					}
					if(!this.typeNewTitle){
						this.newTitle = this.title
						this.typeNewTitle++
					}
					if(this.title.indexOf('《本草纲目》明·金陵版') != -1) {
						this.onGetMycollection();
					} else {
						if(this.title.indexOf('胸针') != -1){
							if(JSON.stringify(this.stateData) != '{}' && this.stateData.nft_name != '全部'){
								// this.title = `${ !this.current ? '艾草' : this.stateData.name}胸针系列${datas.length ? `(${datas.length})` : ''}`
								this.title = `${ this.stateData.nft_name}胸针${datas.length ? `(${datas.length})` : ''}`
							} else {
								this.title = `${this.newTitle}${datas.length ? `(${datas.length})` : ''}`
							}
						} else {
							this.title = `${this.newTitle}${this.counts ? `(${this.counts})` : ``}`
						}
					}
					// this.onBroochFilter();

					datas.forEach((item, index) =>{
						this.listBrooch.push(item)
					})
					uni.hideLoading()
					this.loading = false
				} catch (e) {
					uni.hideLoading()
					this.loading = false
				}
			},
			closeBox() {
				this.isShowMenu = false
				this.onInitialization();
				this.typeFilters = 0
				this.onGetList();
				this.listBrooch = []
				this.filterList = [{
						count: 0,
						id: '',
						nft_name:'全部',
						state: true
					}]
				// this.getJxzCollection()
			}
		}
	}
</script>
<style>
	page{
		background: #05070a!important;
	}
</style>
<style lang="scss" scoped>
	::v-deep.u-popup__content {
		background-color: transparent !important;
	}
	.closeBlind {
		display: flex;
		justify-content: center;
	}
	.openBtnBlindBox {
		background: linear-gradient(0deg, #FFFFFF, #E1D4FF);
		border-radius: 80rpx;
		padding: 27rpx 0;
		position: relative;
		bottom: 86rpx;
		width: 60%;
		margin: auto;
		font-size: 26rpx;
		color: #37226D;
	}
	.open{
		opacity: 1;
	}
	.close{
		opacity: 0;
	}
	.transitions{
		transition: all .5s;
		position: fixed;
		z-index: 999;
		width: 100%;
	}
	.storage{
		position: relative;
		z-index: 0;
	}
	.list {
		flex-wrap: wrap;
		align-items: flex-start;

		.list-item {
			margin: 0 40rpx 40rpx 0;

			&:nth-child(2n) {
				margin-right: 0;
			}
		}
	}
	.menu{
		background-color: #000000;
		display: flex;
		justify-content: space-around;
		font-size: 24rpx;
		flex-wrap: wrap;
		padding: 44rpx 0 16rpx;
		.menu-item{
			width: 23%;
			border-radius: 32rpx;
			text-align: center;
			margin-bottom: 32rpx;
			padding: 21rpx;
		}
		.greyIns{
			background: #302c36;
			color: #FFFFFF;
		}
		.grey{
			background: #FFFFFF;
			color: #121418;
		}
	}
	.cover {
		position: relative;
		.collectionBck {
			color: #FFFFFF;
			background: rgba(28, 34, 53, .9);

			position: absolute !important;
			top: 0;
			z-index: 9;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;

			.collectionImgs {
				width: 100%;
				text-align: center;
				padding-top: 66rpx;

				.text {
					font-size: 26rpx;
					line-height: 42rpx;
					margin: 30rpx 0 60rpx;
				}

				.collectionBtn {
					background: #000000;
					border-radius: 30rpx;
					padding: 12rpx 10rpx;
					font-size: 24rpx;
					width: 50%;
					margin: auto;
				}

				image {
					width: 54rpx;
					height: 54rpx;
				}
			}
		}
	}

	.colltion {
		border: 2rpx solid #313131;
		border-radius: 10rpx;
		overflow: hidden;
		width: 315rpx;
		box-sizing: border-box;

		.colltion-title {
			// height: 90rpx;
			background: #1c222d;
			border-radius: 0 0 10rpx 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFFCEF;
			font-size: $uni-font-size-base;
			padding: 30rpx 10rpx;
		}
	}
	.screenSuccess {
		width: 100%;
		height: 100vh;
		position: fixed;
		z-index: 1;
	}
	.empty {
		height: calc(100vh - 120px);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #747474;
	}
</style>
